---
title: Isole Astro
description: "Le Isole Astro (note anche come Isole di componenti) sono un pattern di architettura web pionierizzato da Astro. L’“architettura a isole” è stata coniata per la prima volta dall'architetto frontend di Etsy Katie Sylor-Miller nel 2019 e ampliata dal creatore di Preact Jason Miller."
i18nReady: true
---

import IslandsDiagram from '~/components/IslandsDiagram.astro';

Astro ha pionierizzato e reso popolare un'architettura frontend chiamata Isole. L'architettura a isole comporta migliori prestazioni frontend aiutandoti a evitare modelli JavaScript monolitici e rimuovendo tutto il JavaScript non essenziale dalla pagina automaticamente. Gli sviluppatori continuano a usare i loro componenti e framework UI preferiti con Astro e ottengono comunque questi benefici.

## Una breve lezione di storia

Il termine "isola di componenti" è stato coniato per la prima volta dall'architetto frontend di Etsy [Katie Sylor-Miller](https://sylormiller.com/) nel 2019. Questa idea è stata poi ampliata e documentata in [questo post](https://jasonformat.com/islands-architecture/) dal creatore di Preact Jason Miller l'11 agosto 2020.

> L'idea generale di un'architettura a "Isole" è ingannevolmente semplice: renderizzare pagine HTML sul server e iniettare segnaposto o slot intorno a regioni altamente dinamiche [...] che possono quindi essere "idratate" sul client in piccoli widget autosufficienti, riutilizzando il loro HTML renderizzato inizialmente sul server.
> — Jason Miller, Creatore di Preact

La tecnica su cui si basa questo pattern architettonico è nota anche come **idratazione parziale** o selettiva.

Al contrario, la maggior parte dei framework web basati su JavaScript idratano e renderizzano un intero sito web come un'unica grande applicazione JavaScript (nota anche come applicazione a pagina singola o SPA). Le SPA forniscono semplicità e potenza ma soffrono di problemi di prestazioni di caricamento della pagina a causa dell'elevato utilizzo di JavaScript lato client.

Le SPA hanno il loro posto, anche [incorporate all'interno di una pagina Astro](/it/guides/migrate-to-astro/from-create-react-app/). Ma le SPA mancano della capacità nativa di idratare selettivamente e strategicamente, rendendole una scelta troppo pesante per la maggior parte dei progetti sul web di oggi.

Astro è diventato popolare come il primo framework web JavaScript mainstream con idratazione selettiva integrata, utilizzando quel pattern di isole di componenti coniato per la prima volta da Sylor-Miller. 

## Cos'è un isola?

**In Astro, un'"isola" si riferisce a qualsiasi componente UI interattivo nella pagina.** Pensa a un'isola come a un widget interattivo che galleggia in un mare altrimenti statico e leggero di HTML renderizzato lato server. 

<IslandsDiagram>
  <Fragment slot="headerApp">Header (isola interattiva)</Fragment>
  <Fragment slot="sidebarApp">Barra laterale (HTML statico)</Fragment>
  <Fragment slot="main">
    Contenuto statico come testo, immagini, ecc.
  </Fragment>
  <Fragment slot="carouselApp">Carosello di immagini (isola interattiva)</Fragment>
  <Fragment slot="footer">Piè di pagina (HTML statico)</Fragment>
  <Fragment slot="source">Fonte: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
</IslandsDiagram>

Un'isola funziona sempre in isolamento dalle altre isole nella pagina e possono esistere più isole in una pagina. Le isole possono ancora condividere stato e comunicare tra loro, anche se funzionano in contesti di componenti diversi. 

Questa flessibilità consente ad Astro di supportare più framework UI come [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) e [SolidJS](https://www.solidjs.com/). Poiché sono indipendenti, puoi anche mescolare diversi framework in ogni pagina. 

:::tip
Anche se la maggior parte degli sviluppatori si atterrà a un solo framework UI, Astro supporta più framework nello stesso progetto. Questo ti consente di:

- Scegliere il framework migliore per ogni componente.  
- Imparare un nuovo framework senza dover avviare un nuovo progetto.
- Collaborare con altri anche quando si lavora in framework diversi.  
- Convertire gradualmente un sito esistente in un altro framework senza tempi di inattività.
:::

## Creare un isola

Per impostazione predefinita, Astro convertirà automaticamente ogni componente UI solo in HTML e CSS, **eliminando tutto il JavaScript lato client automaticamente.**


```astro title="src/pages/index.astro"
<MyReactComponent />
```

Questo potrebbe sembrare restrittivo, ma questo comportamento mantiene i siti web Astro veloci per impostazione predefinita e protegge gli sviluppatori dall'inviare accidentalmente JavaScript non necessario o indesiderato che potrebbe rallentare il loro sito web. 

Trasformare qualsiasi componente UI statico in un'isola interattiva richiede solo una direttiva `client:*`. Astro quindi compila e impacchetta automaticamente il tuo JavaScript lato client per prestazioni ottimizzate.

```astro title="src/pages/index.astro" ins="client:load"
<!-- Questo componente è ora interattivo nella pagina!
     Il resto del tuo sito web rimane statico. -->
<MyReactComponent client:load />
```

Con le isole, lo JavaScript lato client viene caricato solo per i componenti interattivi espliciti che contrassegni utilizzando le direttive `client:*`.

E poiché l'interazione è configurata a livello di componente, puoi gestire diverse priorità di caricamento per ogni componente in base al suo utilizzo. Ad esempio, `client:idle` dice a un componente di caricarsi quando il browser diventa inattivo e `client:visible` dice a un componente di caricarsi solo una volta che entra nel viewport.

## Quali sono i vantaggi delle isole?

Il vantaggio più ovvio nella creazione con le Isole Astro è la prestazione: la maggior parte del tuo sito web viene convertita in HTML e CSS veloci e statici e lo JavaScript viene caricato solo per i singoli componenti che ne hanno bisogno. Lo JavaScript è uno degli asset più lenti che puoi caricare per byte, quindi ogni byte conta.  

Un altro vantaggio è il caricamento parallelo. Nell'esempio di illustrazione sopra, l'"isola carosello immagini" a bassa priorità non deve bloccare l'"isola intestazione" ad alta priorità. I due vengono caricati in parallelo e idratati in isolamento, il che significa che l'intestazione diventa interattiva immediatamente senza dover attendere il carosello di immagini più pesante più in basso nella pagina.  

Ancora meglio, puoi dire ad Astro esattamente come e quando renderizzare ogni componente. Se quel carosello di immagini è davvero costoso da caricare, puoi allegare una [direttiva client](/it/reference/directives-reference/#client-directives) speciale che dice ad Astro di caricare il carosello solo quando diventa visibile nella pagina. Se l'utente non lo vede mai, non viene mai caricato.

In Astro, sta a te come sviluppatore dire esplicitamente ad Astro quali componenti nella pagina devono essere eseguiti anche nel browser. Astro idraterà esattamente ciò che è necessario nella pagina e lascerà il resto del tuo sito come HTML statico.

**Le Isole sono il segreto della storia delle prestazioni veloci per impostazione predefinita di Astro!**
